<%@ page import="java.util.List" %>
<%@ page import="com.woniumall.pojo.Cart" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/30
  Time: 21:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>我的购物车</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <style>
        .trim{
            width: 1300px;
            margin-left: 350px;
            height: 3px;
            background-color: #E66F23;
        }
        .detail{
            width: 1300px;
            margin-top: 10px;
            margin-left: 350px;
            height: 25px;
            text-align: left;
            font-size: 13px;
            line-height: 25px;
        }
        .mycart{
            width: 1300px;
            height: 80px;
            /* border: 1px solid black; */
            margin-left: 350px;
            margin-top: 10px ;
            background-color: #F7F5F6;
        }
        .mycart td[class="mycart-1"]{
            width: 320px;
        }
        .mycart td[class="mycart-2"]{
            width: 300px;
            padding-left: 100px;
            color: white;
        }
        .mycart td[class="mycart-3"]{
            width: 280px;
            padding-left: 100px;
            color: white;
        }
        .mycart td[class="mycart-4"]{
            width: 300px;
            padding-left: 100px;
            color: white;
        }
        .mycart-1{
            height: 90px;
            float: left;
        }
        .mycart-2,.mycart-3,.mycart-4{
            background-image: url(${pageContext.request.contextPath}/img/licurrent_bg.gif) ;
            background-repeat: no-repeat;
            background-position: center;
        }
        .mycart-2{
            color: red;
        }
        .showcart{
            height: 25px;
            margin-left: 370px;
            margin-top: 50px ;
            line-height: 25px;
            font-weight: bold;
        }
        .content{
            width: 1300px;
            height: 500px;
            margin-top: 10px ;
            margin-left: 350px;
            border: 1px solid #848484;
            border-collapse: collapse;
        }
        .content tr[class="content-row1"]{
            height: 45px;
            border: 1px solid #848484;
            background-color: #F5F5F5;
            border-width: 1px;
        }
        tr[class="content-row1"]>td{
            border: 1px solid #848484;
        }
        .content tr[class="content-row2"]{
            height: 120px;
            border-bottom: 1px solid #848484;
        }
        .content tr[class="content-row3"]{
            height: 120px;
            border-bottom: 1px solid #848484;
        }
        .content tr[class="content-row4"]{
            height: 120px;
            border-style:"border 1px solid #848484" ;
            border-bottom: 1px solid #848484;
        }
        .content tr[class="content-row5"]{
            height: 75px;
            clear: both;
            text-align: right;
            background-color: #F3F3F3;
        }
        .content tr[class="content-row6"]{
            height: 120px;
        }
        .content td{
            text-align: center;
            font-size: 13px;
        }
        .content td[class="content-col1"]{
            width: 85px;
        }
        .content td[class="content-col2"]{
            width: 155px;
        }
        .content td[class="content-col3"]{
            width: 540px;
        }
        .content td[class="content-col4"]{
            width: 110px;
        }
        .content td[class="content-col5"]{
            width: 110px;
        }
        .content td[class="content-col6"]{
            width: 110px;
        }
        .content td[class="content-row5-1"]{
            text-align: right;
            font-size: 13px;
        }
        .content-row5-2{
            color: #F06C12;
            padding-right: 20PX;
            font-size: 13px;
        }
        .content-font{
            color:  red ;
        }
        .content img{
            padding-top: 2px;
            height: 100px;
            box-sizing: border-box;
            border: 1px solid #848484;
        }

        .content-row6-right{
            width: 140PX;
            height: 50px;
            text-align: center;
            float: right;
            margin-bottom: 20PX;
            margin-right:20px ;
            line-height: 50PX;
            color: #FAFFFC;
            background-color:#D84F09 ;
            font-size: 20px;
            border-radius: 3px;
            box-sizing: border-box;
        }
        .content-row6-left{
            width: 110px;
            height: 30px;
            text-align: center;
            margin-TOP: 20PX;
            float: right;
            margin-right:20px ;
            line-height: 30PX;
            color: #848484;
            font-size: 20px;
            background-color:#f6f6f6 ;
            border: 1px solid #848484;
            border-radius: 3px;
            box-sizing: border-box;
        }
        input[type="button"]{
            width: 20px;
            height: 20px;
        }
        input[type="text"]{
            width: 45px;
            height: 24px;
            text-align: center;
        }
    </style>
</head>
<body>
<%--商城抬头--%>
<%@include file="headtop.jsp"%>

<div class="trim"></div>

<div class="detail">
    您当前的位置:&nbsp;
    <a href="#">首页</a>
    &rsaquo;&rsaquo;购物车
</div>

<table class="mycart">
    <tr>
        <td>
            <img class="mycart-1" src="${pageContext.request.contextPath}/img/cart_logo.jpg" />
        </td>
        <td class="mycart-2">1、查看购物车</td>
        <td class="mycart-3">2、填写核对订单信息</td>
        <td class="mycart-4">3、成功提交订单</td>
        <td></td>
    </tr>
</table>

<div class="showcart">查看购物车</div>

<table  class="content">

    <tr class="content-row1"  >
        <td class="content-col1">
            <input type="checkbox"  id="selectAll"/>
            全选</td>
        <td class="content-col2">图片</td>
        <td class="content-col3">商品名称</td>
        <td class="content-col4">单价</td>
        <td class="content-col5">数量</td>
        <td class="content-col6">小计</td>
        <td class="content-col7">操作</td>
    </tr>
    <c:forEach items="${cartlist}" var="cart" varStatus="status" >
    <tr class="content-row2">
        <td>
            <input type="checkbox" name="ids"  class="box" onclick="aa()" value="${status.index}" id="box${status.index}"/>
        </td>
        <td>
            <img href="" src="${pageContext.request.contextPath}/img/${cart.goods.image}" />
        </td>
        <td>
            <a href="#">
                    ${cart.goods.name}
            </a>
        </td>
        <td class="content-font "   id="totalPrice${cart.id}">
            ￥<span class="pricecart">${cart.goods.salesprice}</span>
        </td>
        <td>
            <a href="javascript:void(0)">
<%--        点击事件,将文本框对象的id传入        --%>
                <input type="button" value="-" onclick="sub(num${cart.id},${status.index})" class="sub"/>
            </a>
<%--           文本框绑定离焦事件    --%>
            <input class="yzquantity1" onblur="yzquantity(num${cart.id},${status.index})" type="text"  name="amount" value="${cart.nums }"  id="num${cart.id}" >
            <a href="javascript:void(0)">
                <input type="button" value="+"  onclick="plus(num${cart.id},${status.index})" class="plus"/>
            </a>
        </td>

        <td class="content-font">
            ￥<font class="content-row5-2 pricescart" id="totalPricenum" >${cart.subtotal}</font>
        </td>
        <td class="content-col7"   class="content-font" onclick="remove(${cart.id})"><a href="javascript:void(0)">删除</a><span style="display: none"   class="getCartId">${cart.id}</span></td>
    </tr>
    </c:forEach>



    <tr class="content-row5">
        <td class="content-row5-1" colspan="7" >金额总计(不含运费):￥
            <font class="content-row5-2 totalPrices" id="bb">0.00</font>
        </td>
    </tr>
    <tr class="content-row6">
        <td colspan="4">
        </td>
        <td colspan="3">
            <div class="content-row6-right"><a onclick="accoints()">去结算</a></div>
            <div class="content-row6-left">
                <a href="${pageContext.request.contextPath }/index.jsp" class="btn btn-info btn-lg active btn-sm" role="button">继续购物</a>
            </div>

            <!-- <input class type="button" value="继续购物" />
            <input type="button" value="去结算" /> -->
        </td>
    </tr>
</table>

<!-- 底栏属性 -->
<%@include file="helpinfo.jsp"%>
<!-- 尾栏 -->
<%@include file="footer.jsp"%>



</body>
<script>

    //删除购物车数据
    function remove(cartid){
        var msg = "您确定要删除当前订单码？";
        if (confirm(msg)==true){
            location.href="${pageContext.request.contextPath}/cart/remove?cartId="+cartid;
            return true;  //你也可以在这里做其他的操作
        }else{
            return false;
        }
    }

    // 复选框的全选和全不选
    $(function() {
        // 获得全部面的复选框
        var $selectAll = $("#selectAll");
        $selectAll.click(function() {
            // alert($selectAll.prop("checked"));
            if ($selectAll.prop("checked") == true) {
                // 复选框已被选中
                $(":checkbox[name='ids']").prop("checked", true);
                //调用单选框的功能
                aa();
            } else {
                // 复选框没被选中
                $(":checkbox[name='ids']").prop("checked", false);
                $("#bb").text(0);
            }
        });
    });


    /*增加或删除数量*/
    function sub(psid,index) {
        // alert(index);
        if (psid.value > 0) {
            if (psid.value == 1) {
                alert("已到达最小数量！");
                return;
            }
            psid.value = psid.value-1;
            var a = psid.value;
            // alert(a);
            var c = $(psid).parent().parent().parent().parent().find(".pricecart")[index].innerHTML;
            // alert(c);
            var b = $(psid).parent().parent().parent().parent().find(".pricescart")[index].innerHTML=(a*c).toFixed(2);

            let cartid = parseInt($(psid).parent().parent().parent().parent().find(".getCartId")[index].innerHTML);
            //调用单选框的功能
            aa();
            synchronization(cartid,a);
        } else {
            alert("请输入有效数量！");
        }
    }


    //加法
    function plus(psid,index) {
        if (psid.value > 0) {
            psid.value = +psid.value+1;
            var a = psid.value;
            var c = $(psid).parent().parent().parent().parent().find(".pricecart")[index].innerHTML;
            var b = $(psid).parent().parent().parent().parent().find(".pricescart")[index].innerHTML=(a*c).toFixed(2);

            let cartid = parseInt($(psid).parent().parent().parent().parent().find(".getCartId")[index].innerHTML);
            //调用单选框的功能
            aa();
            synchronization(cartid,a);
        } else {
            alert("请输入有效数量！");
        }
    }

    function yzquantity(psid,index) {
        var yzquantity = psid.value;
        //alert(yzquantity);
        var reg = /^[0-9]*$/;
        reg.test(yzquantity);
        if (reg.test(yzquantity) == false) {
            alert("请输入有效数量！");
            return;
            // $(".yzquantity" + psid).val(yzquantity);
        }else {
            var c = $(psid).parent().parent().parent().parent().find(".pricecart")[index].innerHTML;
            var b = $(psid).parent().parent().parent().parent().find(".pricescart")[index].innerHTML=(yzquantity*c).toFixed(2);
            let cartid = parseInt($(psid).parent().parent().parent().parent().find(".getCartId")[index].innerHTML);
            //调用单选框的功能
            aa();
            synchronization(cartid,yzquantity);
        }

    }
    function synchronization(cartId,nums) {
        $.ajax({
            url: "${pageContext.request.contextPath}/cart/synchronization",
            type:"post",
            data: {
                cartId:cartId,
                nums:nums
            },
            success: function (data) {
                if (data == "200"){//修改成功
                }else {
                    alert("订单数量修改失败")
                }
            }
        });
    }
    //单选框选中，触发结算的值更新,计算总价
    function aa() {
         let index = 0;
        var totalPrices =0;
        let cartid = 0;

            /*$("#box")*/
        $("input[name='ids']:checked").each(function ( ) {
            index = parseInt($(this).val());
            // alert(index);
            //获取选中栏的订单id
            cartid = parseInt($(this).parent().parent().parent().parent().find(".getCartId")[index].innerHTML);
           // alert(cartid);
            totalPrices +=  Math.floor($(this).parent().parent().parent().parent().find(".pricescart")[index].innerHTML * 100) / 100 ;
            // alert($(this).parent().parent().parent().parent().find(".pricescart")[index].innerHTML);

            /*totalPrices +=  $(prices).parent().parent().parent().parent().find(".pricescart")[index].innerHTML;
            alert($(prices).parent().parent().parent().parent().find(".pricescart")[index].innerHTML);*/
        });
        totalPrices = totalPrices.toFixed(2);
        $("#bb").html(totalPrices);
    }
    function accoints() {
        let cartid = 0;
        if( $("input[name='ids']:checked").length<1){
            alert("至少选择一件商品结算")
            return;
        }

        //定义一个数组，用来存储购物车id
        var arr = new Array();
        $("input[name='ids']:checked").each(function ( ) {
            //获取选中栏的订单id
            cartid = parseInt($(this).val());
            arr.push(cartid);
        })
        //将数组转为json传递到订单创建界面
        location.href = "${pageContext.request.contextPath}/order/creatOrder?id="+encodeURI(JSON.stringify(arr));
    }
</script>
</html>